<template>
  <div id="flightExecution">
    <!-- 页面主体 -->
    <el-form
      label-width="150px"
      class="applicationForm"
      ref="detailFormRef"
      :model="submitForm"
      :rules="rules"
    >
      <div class="container">
        <!-- 左侧信息填写栏 -->
        <div class="leftCard">
          <!-- 填报信息 -->
          <div class="filling">
            <div class="title">
              <div class="icon"></div>
              飞行实施情况
            </div>
            <el-form-item :label="$t('flyTask.ADT')" prop="flyTime">
              <el-date-picker
                :disabled="disabledForm"
                v-model="submitForm.flyTime"
                type="datetime"
                format="YYYY-MM-DD HH:mm"
                :placeholder="$t('placeholder.ADT')"
                :disabled-date="SpickerOptions"
                style="width: 80%"
              />
            </el-form-item>
            <el-form-item :label="$t('flyTask.ALT')" prop="descendTime">
              <el-date-picker
                :disabled="disabledForm"
                v-model="submitForm.descendTime"
                type="datetime"
                format="YYYY-MM-DD HH:mm"
                :placeholder="$t('placeholder.ALT')"
                :disabled-date="EpickerOptions"
                :default-time="defaultTime"
                style="width: 80%"
              />
            </el-form-item>
            <el-form-item :label="$t('flyTask.FlyDuration')">
              <el-input
                disabled
                v-model="duration"
                :placeholder="$t('placeholder.FlyDuration')"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="lastRow lastRow1"
              :label="$t('flyTask.fileDesc')"
            >
              <Upload
                :fileList="subFileList"
                :isCanDelete="!disabledForm"
                :showButton="!disabledForm"
                @success="uploadSuccess"
                @deleteFile="deleteFile"
              />
            </el-form-item>
            <el-form-item class="lastRow" :label="$t('flyTask.remark')">
              <el-input
                v-model="submitForm.remark"
                :disabled="disabledForm"
                :placeholder="$t('placeholder.remark')"
                maxlength="150"
                :rows="3"
                type="textarea"
              />
            </el-form-item>
          </div>

          <!-- 基本信息 -->
          <div class="basicInfo">
            <div class="title">
              <div class="icon"></div>
              {{ $t("flyTask.BasicInformation") }}
            </div>
            <!-- 空域编号 -->
            <el-form-item
              :label="$t('flyTask.SelectAirspace')"
              prop="airspaceApplyCode"
            >
              <el-autocomplete
                disabled
                v-model="detailForm.airspaceApplyCode"
                :fetch-suggestions="querySearchAsync"
                value-key="airspaceApplyCode"
                clearable
                :debounce="500"
                placeholder="请输入空域申请编号"
              />
            </el-form-item>
            <!-- 申请人 -->
            <el-form-item :label="$t('flyTask.applicant')" prop="applicant">
              <el-input
                disabled
                v-model="detailForm.applicant"
                placeholder="请输入申请人姓名"
              />
            </el-form-item>
            <!-- 申请主题 -->
            <el-form-item :label="$t('flyTask.theme')" prop="themeName">
              <el-input
                clearable
                disabled
                v-model="detailForm.themeName"
                :placeholder="$t('placeholder.theme')"
              />
            </el-form-item>
            <!-- 飞手--机构 -->
            <el-form-item
              v-if="applyType === 1"
              :label="$t('flyTask.flyingHand')"
              prop="flyingHand"
              class="showMore"
            >
              <el-select
                clearable
                multiple
                collapse-tags
                disabled
                v-model="pilot"
                p:placeholder="$t('placeholder.flyingHand')"
              >
                <el-option
                  v-for="item in dronePilotList"
                  :key="item.userId"
                  :label="`${item.userName}  ${item.phoneNumber}`"
                  :value="`${item.userName}+${item.userId}+${item.phoneNumber}`"
                />
              </el-select>
              <div
                class="show"
                @click="showDronePilotDetail(detailForm.flyingId)"
              ></div>
            </el-form-item>
            <!-- 飞手--个人 -->
            <el-form-item
              v-else
              :label="$t('flyTask.flyingHand')"
              prop="applicant"
              class="showMore"
            >
              <el-input
                disabled
                v-model="detailForm.applicant"
                placeholder="请输入飞手姓名"
              />
              <div
                class="show"
                @click="showDronePilotDetail(detailForm.flyingId)"
              ></div>
            </el-form-item>
            <!-- 航空器类型 -->
            <el-form-item
              :label="$t('flyTask.AircraftType')"
              prop="aircraftType"
            >
              <el-select
                disabled
                v-model="detailForm.aircraftType"
                placeholder="请选择航空器类型"
              >
                <el-option
                  v-for="dict in deviceTypeList"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue * 1"
                />
              </el-select>
            </el-form-item>
            <!-- 航空器 -->
            <el-form-item
              :label="$t('flyTask.aircraft')"
              prop="aircraftId"
              class="showMore"
            >
              <el-select
                clearable
                multiple
                collapse-tags
                disabled
                v-model="detailForm.aircraftId"
                :placeholder="$t('placeholder.aircraft')"
              >
                <el-option
                  v-for="item in selectaircraftList"
                  :key="item.flightControlSn"
                  :label="
                    item.deviceType == '品牌无人机' || item.deviceType == '飞机'
                      ? `${item.modelType}  ${item.flightControlSn}`
                      : `${item.deviceName}`
                  "
                  :value="item.flightControlSn"
                />
              </el-select>
              <div
                class="show"
                @click="
                  showDroneDetail(
                    detailForm.aircraftType,
                    detailForm.applicantId,
                    detailForm.aircraftId
                  )
                "
              ></div>
            </el-form-item>
            <!-- 底高 -->
            <el-form-item :label="$t('flyTask.FPLLow')" prop="lowHeight">
              <el-input
                disabled
                v-model="detailForm.lowHeight"
                placeholder="空域底高必须为0-10000的整数"
              />
            </el-form-item>
            <!-- 顶高 -->
            <el-form-item :label="$t('flyTask.FPLTop')" prop="topHeight">
              <el-input
                disabled
                v-model="detailForm.topHeight"
                placeholder="空域顶高必须为0-10000的整数"
              />
            </el-form-item>
            <!-- 开始时间 -->
            <el-form-item :label="$t('flyTask.startTime')" prop="startTime">
              <el-date-picker
                disabled
                v-model="detailForm.startTime"
                type="date"
                format="YYYY-MM-DD HH:ss"
                placeholder="请选择开始时间"
                style="width: 80%"
              />
            </el-form-item>
            <!-- 结束时间 -->
            <el-form-item :label="$t('flyTask.endTime')" prop="endTime">
              <el-date-picker
                disabled
                v-model="detailForm.endTime"
                type="date"
                format="YYYY-MM-DD HH:ss"
                placeholder="请选择结束时间"
                style="width: 80%"
              />
            </el-form-item>
            <!-- 任务性质 -->
            <el-form-item :label="$t('flyTask.TaskNature')" prop="taskName">
              <el-select
                disabled
                v-model="detailForm.taskName"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in taskNameList"
                  :key="item.taskNameId"
                  :label="item.taskName"
                  :value="item.taskName"
                />
              </el-select>
            </el-form-item>
            <!-- 飞行模式 -->
            <el-form-item
              v-if="detailForm.aircraftType !== '4'"
              :label="$t('flyTask.FlightMode')"
              prop="flightMode"
            >
              <el-select
                disabled
                v-model="detailForm.flightMode"
                placeholder="请选择飞行模式"
              >
                <el-option
                  v-for="item in flightModeList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue * 1"
                />
              </el-select>
            </el-form-item>
            <!-- 操作模式 -->
            <el-form-item
              v-if="detailForm.aircraftType !== '4'"
              :label="$t('flyTask.OperationMode')"
              prop="operatorMode"
            >
              <el-select
                disabled
                v-model="detailForm.operatorMode"
                placeholder="请选择操控模式"
              >
                <el-option
                  v-for="item in operatorModeList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue * 1"
                />
              </el-select>
            </el-form-item>
            <!-- 空域性质 -->
            <el-form-item
              v-if="detailForm.aircraftType !== '4'"
              :label="$t('flyTask.AirspaceNature')"
            >
              <el-select
                disabled
                v-model="detailForm.airspaceNature"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in airspaceNatureList"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue * 1"
                />
              </el-select>
            </el-form-item>
            <!-- 联系人 -->
            <el-form-item
              v-if="applyType === 1"
              :label="$t('flyTask.contacts')"
              prop="contacts"
            >
              <el-input
                clearable
                disabled
                v-model="detailForm.contacts"
                :placeholder="$t('placeholder.contacts')"
              />
            </el-form-item>
            <!-- 联系电话 -->
            <el-form-item
              v-if="applyType === 1"
              :label="$t('flyTask.mobile')"
              prop="mobile"
            >
              <el-input
                clearable
                disabled
                v-model="detailForm.mobile"
                :placeholder="$t('placeholder.mobile')"
              />
            </el-form-item>
            <!-- 审批文件 -->
            <el-form-item :label="$t('flyTask.TaskFile')">
              <Upload
                :fileList="fileList"
                :isCanDelete="false"
                :showButton="false"
              />
            </el-form-item>
            <!-- 紧急预案 -->
            <el-form-item
              v-if="detailForm.aircraftType !== '4'"
              :label="$t('flyTask.EmergencyPlan')"
            >
              <el-input
                v-model="detailForm.emergencyPlan"
                disabled
                :rows="3"
                type="textarea"
              />
            </el-form-item>
            <!-- 备注说明 -->
            <el-form-item :label="$t('flyTask.remark')">
              <el-input
                disabled
                v-model="detailForm.remark"
                :rows="3"
                type="textarea"
              />
            </el-form-item>
          </div>
        </div>

        <!-- 右侧绘制空域地图 -->
        <div class="rightCard">
          <div
            class="map-argument"
            :class="{
              drowAirLine: detailForm.flightArea === 1,
              drowAirspace: detailForm.flightArea === 0,
            }"
          >
            <div class="title">
              <div class="icon"></div>
              {{ $t("flyTask.AirspaceDetail") }}
            </div>
            <el-form-item :label="$t('flyTask.FlightArea')" prop="flightArea">
              <el-select
                disabled
                v-model="detailForm.flightArea"
                placeholder="请选择操控模式"
                @change="changeAirType"
              >
                <el-option
                  v-for="item in airTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 绘制空域 -->
            <div v-if="detailForm.flightArea === 0" class="drowAddress">
              <div class="item">
                <span class="text">{{ $t("flyTask.center") }}</span>
                <el-input
                  disabled
                  v-model="areaInfo.flightAddress"
                  :placeholder="$t('placeholder.centerAddress')"
                ></el-input>
                <span class="text last">{{ $t("flyTask.center2") }}</span>
              </div>
              <div class="item">
                <span class="text">{{ $t("flyTask.radius") }}</span>
                <el-input
                  disabled
                  v-model.number="areaInfo.flightRadius"
                  :placeholder="$t('placeholder.radius')"
                ></el-input>
                <span class="text last">{{ $t("flyTask.radius2") }}</span>
              </div>
            </div>

            <!-- 绘制航线 -->
            <div v-if="detailForm.flightArea === 1" class="airLine">
              <!-- <div class="args">
                <span class="item">{{ $t("flyTask.takeoffPoint") }}：</span>
                <el-input
                  disabled
                  v-model="airlineInfo.takeOffPointAddress"
                  :placeholder="$t('placeholder.clickMap')"
                ></el-input>
              </div>
              <div class="args">
                <span class="item">{{ $t("flyTask.landingPoint") }}：</span>
                <el-input
                  disabled
                  v-model="airlineInfo.landingPointAddress"
                  :placeholder="$t('placeholder.clickMap')"
                ></el-input>
              </div>
              <div class="args">
                <span class="item">{{ $t("flyTask.landingPoint") }}：</span>
                <el-select
                  disabled
                  v-model="airlineInfo.flyMode"
                  :placeholder="$t('placeholder.takeoffMethod')"
                >
                  <el-option
                    v-for="item in flyModeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div class="args">
                <span class="item">{{ $t("flyTask.safeAltitude") }}：</span>
                <el-input
                  disabled
                  v-model="airlineInfo.flyHeight"
                  :placeholder="$t('placeholder.safeAltitude')"
                ></el-input>
              </div>
              <div class="args">
                <span class="item">{{ $t("flyTask.ALTNPoint") }}：</span>
                <el-input
                  disabled
                  v-model="airlineInfo.alternateLandingPointAddress"
                  :placeholder="$t('placeholder.clickMap')"
                ></el-input>
              </div> -->

              <!-- 航线名称 -->
              <el-form-item
                class="args"
                :label="$t('flyTask.routeName')"
                prop="routeName"
              >
                <el-input
                  clearable
                  disabled
                  v-model="detailForm.routeName"
                  :placeholder="$t('placeholder.routeName')"
                ></el-input>
              </el-form-item>

              <!-- 起飞点 -->
              <el-form-item class="args" :label="$t('flyTask.takeoffPoint')">
                <el-input
                  disabled
                  v-model="airlineInfo.takeOffPointAddress"
                  :placeholder="$t('placeholder.clickMap')"
                ></el-input>
              </el-form-item>

              <!-- 降落点 -->
              <el-form-item class="args" :label="$t('flyTask.landingPoint')">
                <el-input
                  disabled
                  v-model="airlineInfo.landingPointAddress"
                  :placeholder="$t('placeholder.clickMap')"
                ></el-input>
              </el-form-item>

              <!-- 起飞方式 -->
              <el-form-item
                class="args"
                :label="$t('flyTask.takeoffMethod')"
                prop="flyMode"
              >
                <el-select
                  clearable
                  disabled
                  v-model="detailForm.flyMode"
                  :placeholder="$t('placeholder.takeoffMethod')"
                >
                  <el-option
                    v-for="item in flyModeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <!-- 安全高度 -->
              <el-form-item
                class="args"
                :label="$t('flyTask.safeAltitude')"
                prop="flyHeight"
              >
                <el-input
                  clearable
                  disabled
                  v-model="detailForm.flyHeight"
                  :placeholder="$t('placeholder.safeAltitude')"
                ></el-input>
              </el-form-item>

              <!-- 备降点 -->
              <el-form-item class="args last" :label="$t('flyTask.ALTNPoint')">
                <el-input
                  disabled
                  v-model="airlineInfo.alternateLandingPointAddress"
                  :placeholder="$t('placeholder.clickMap')"
                ></el-input>
              </el-form-item>
            </div>
            <div v-if="isOverlap" class="warning">
              {{ $t("flyTask.alarmTip") }}
            </div>
          </div>

          <!-- 地图 -->
          <div id="airspaceMap"></div>
          <!--  图层控件  -->
          <div class="airspaceLayer" @click="airspaceControl"></div>

          <!--  图层控制  -->
          <div v-if="layerVisible" class="layerControl">
            <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
              >空域</el-checkbox
            >
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                v-for="(airspace, index) in airspaceList"
                :key="airspace.airTypeId"
                :label="airspace.airTypeId"
              >
                <div
                  class="checkTitleClass"
                  :id="'ckeckName' + index"
                  @mouseover="checkMouse(airspace.airTypeName, index)"
                >
                  {{ airspace.airTypeName }}
                </div>
              </el-checkbox>
            </el-checkbox-group>
            <el-checkbox
              v-model="satellite"
              label="卫星地图"
              @change="swicthSatellite"
              size="large"
            />
            <el-checkbox
              v-model="grid"
              label="网格"
              @change="handleGrid"
              size="large"
            />
          </div>
        </div>
      </div>

      <!-- 页面底部 -->
      <div class="footBtn">
        <div v-if="openType === 'detail'" class="btn delete" @click="cancelSub">
          {{ $t("common.back") }}
        </div>
        <div v-if="openType === 'edit'" class="btn delete" @click="cancelSub">
          {{ $t("common.cancel") }}
        </div>
        <el-button
          :disabled="isDisabled"
          v-if="openType === 'edit'"
          class="btn save"
          @click="submit(detailFormRef)"
        >
          {{ $t("common.confirm") }}
        </el-button>
      </div>
    </el-form>

    <!-- 飞手详情 -->
    <el-dialog
      v-model="dronePilotVisible"
      title="飞手详情"
      class="detail-dialog"
    >
      <div class="allcrad">
        <div
          class="crad-item"
          v-for="(item, index) in pilotDetList"
          :key="index"
        >
          <div class="item">
            <div class="item-child">
              <div class="child-title">姓名:</div>
              <div class="child-text">{{ item.userName }}</div>
            </div>
            <div class="item-child">
              <div class="child-title">性别:</div>
              <div class="child-text">{{ item.sex == 0 ? "男" : "女" }}</div>
            </div>
          </div>
          <div class="item">
            <div class="item-child">
              <div class="child-title">手机号码:</div>
              <div class="child-text">{{ item.phoneNumber }}</div>
            </div>
            <div class="item-child">
              <div class="child-title">邮箱:</div>
              <div class="child-text">{{ item.email }}</div>
            </div>
          </div>
          <div class="item">
            <div class="item-child">
              <div class="child-title">证件类型:</div>
              <div class="child-text">{{ item.credentialsType }}</div>
            </div>
            <div class="item-child">
              <div class="child-title">证件号码:</div>
              <div class="child-text">{{ item.credentialsNumber }}</div>
            </div>
          </div>
          <div class="item">
            <div class="item-child">
              <div class="child-title">居住地址:</div>
              <div class="child-text">
                {{ item.residentialAddress }}
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-child">
              <div class="child-title">飞行执照:</div>
              <div class="child-text">
                <img
                  style="width: 100px; height: 50px"
                  v-if="item.pilotLicense"
                  :src="item.pilotLicense"
                  alt=""
                />
                <div v-else style="width: 100px; height: 50px">
                  暂无飞行执照
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dialogFoot"></div>
    </el-dialog>

    <!-- 航空器详情 -->
    <el-dialog
      v-model="droneVisible"
      title="航空器详情"
      class="detail-dialog detail-dialog2"
    >
      <div class="allcrad">
        <div
          class="crad-item"
          v-for="(item, index) in deviceDetList"
          :key="index"
        >
          <template v-if="item.deviceType == '0'">
            <div class="item">
              <div class="item-child">
                <div class="child-title">设备类型:</div>
                <div class="child-text">{{ item.deviceTypeId || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">设备品牌:</div>
                <div class="child-text">{{ item.brandNameId || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">设备型号:</div>
                <div class="child-text">{{ item.modelTypeId || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">电子身份证:</div>
                <div class="child-text">{{ item.electronicIdCard || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">机身序列号:</div>
                <div class="child-text">{{ item.serialNumber || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">飞控序列号:</div>
                <div class="child-text">{{ item.flightControlSn || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">设备照片:</div>
                <div class="child-text">
                  <img
                    style="width: 100px; height: 50px"
                    v-if="item.devicePicture"
                    :src="item.devicePicture"
                    alt=""
                  />
                  <div v-else style="width: 100px; height: 50px">暂无照片</div>
                </div>
              </div>
              <div class="item-child">
                <div class="child-title">机身序列号照片:</div>
                <div class="child-text">
                  <img
                    style="width: 100px; height: 50px"
                    v-if="item.serialNumberPicture"
                    :src="item.serialNumberPicture"
                    alt=""
                  />
                  <div v-else style="width: 100px; height: 50px">暂无照片</div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">飞控序列号照片:</div>
                <div class="child-text">
                  <img
                    style="width: 100px; height: 50px"
                    v-if="item.flightControlSnPicture"
                    :src="item.flightControlSnPicture"
                    alt=""
                  />
                  <div v-else style="width: 100px; height: 50px">暂无照片</div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="item.deviceType == '1'">
            <div class="item">
              <div class="item-child">
                <div class="child-title">设备类型:</div>
                <div class="child-text">{{ item.deviceTypeId || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">设备名称:</div>
                <div class="child-text">{{ item.deviceName || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">电子身份证:</div>
                <div class="child-text">{{ item.electronicIdCard || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">通讯频段:</div>
                <div class="child-text">{{ item.communicateType || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">机翼类型:</div>
                <div class="child-text">{{ item.wingType || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">旋翼类型:</div>
                <div class="child-text">{{ item.rotorType || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">机身重量:</div>
                <div class="child-text">
                  {{ item.bodyWeight ? `${item.bodyWeight}kg` : "-" }}
                </div>
              </div>
              <div class="item-child">
                <div class="child-title">起飞重量:</div>
                <div class="child-text">
                  {{ item.takeoffWeight ? `${item.takeoffWeight}kg` : "-" }}
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">是否超视距:</div>
                <div class="child-text">
                  {{ item.wingTypeId == 1 ? "是" : "否" }}
                </div>
              </div>
              <div class="item-child">
                <div class="child-title">是否保值无人机:</div>
                <div class="child-text">
                  {{ item.plantFlag == 1 ? "是" : "否" }}
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">设备照片:</div>
                <div class="child-text">
                  <img
                    style="width: 100px; height: 50px"
                    v-if="item.devicePicture"
                    :src="item.devicePicture"
                    alt=""
                  />
                  <div v-else style="width: 100px; height: 50px">暂无照片</div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="item.deviceType == '2'">
            <div class="item">
              <div class="item-child">
                <div class="child-title">设备类型:</div>
                <div class="child-text">{{ item.deviceTypeId || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">设备名称:</div>
                <div class="child-text">{{ item.deviceName || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">电子身份证:</div>
                <div class="child-text">{{ item.electronicIdCard || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">通讯频段:</div>
                <div class="child-text">{{ item.communicateType || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">机身重量:</div>
                <div class="child-text">
                  {{ item.bodyWeight ? `${item.bodyWeight}Kg` : "-" }}
                </div>
              </div>
              <div class="item-child">
                <div class="child-title">设备照片:</div>
                <div class="child-text">
                  <img
                    style="width: 100px; height: 50px"
                    v-if="item.devicePicture"
                    :src="item.devicePicture"
                    alt=""
                  />
                  <div v-else style="width: 100px; height: 50px">暂无照片</div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="item.deviceType == '3'">
            <div class="item">
              <div class="item-child">
                <div class="child-title">设备类型:</div>
                <div class="child-text">{{ item.deviceTypeId || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">设备名称:</div>
                <div class="child-text">{{ item.deviceName || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">电子身份证:</div>
                <div class="child-text">{{ item.electronicIdCard || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">飞艇类型:</div>
                <div class="child-text">{{ item.airshipType || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">浮升气体:</div>
                <div class="child-text">{{ item.gasDriveType || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">存放地:</div>
                <div class="child-text">{{ item.storagePlace || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">用途:</div>
                <div class="child-text">{{ item.used || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">设备照片:</div>
                <div class="child-text">
                  <img
                    style="width: 100px; height: 50px"
                    v-if="item.devicePicture"
                    :src="item.devicePicture"
                    alt=""
                  />
                  <div v-else style="width: 100px; height: 50px">暂无照片</div>
                </div>
              </div>
            </div>
          </template>
          <template v-if="item.deviceType == '4'">
            <div class="item">
              <div class="item-child">
                <div class="child-title">设备类型:</div>
                <div class="child-text">{{ item.deviceTypeId || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">设备品牌:</div>
                <div class="child-text">{{ item.aircraftBrand || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">设备机型:</div>
                <div class="child-text">{{ item.aircraftModel || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">机尾号:</div>
                <div class="child-text">{{ item.flightControlSn || "-" }}</div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">飞机编号:</div>
                <div class="child-text">{{ item.serialNumber || "-" }}</div>
              </div>
              <div class="item-child">
                <div class="child-title">电子标识:</div>
                <div class="child-text">
                  {{ item.electronicIdentificatIion || "-" }}
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-child">
                <div class="child-title">设备照片:</div>
                <div class="child-text">
                  <img
                    style="width: 100px; height: 50px"
                    v-if="item.devicePicture"
                    :src="item.devicePicture"
                    alt=""
                  />
                  <div v-else style="width: 100px; height: 50px">暂无照片</div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="dialogFoot"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "FlightExecution",
  beforeRouteEnter(to, from, next) {
    const { openType } = to.query;
    if (openType === "detail") to.meta.title = "飞行实施详情";
    next();
  },
};
</script>

<script setup>
import {
  onMounted,
  reactive,
  ref,
  defineProps,
  watch,
  onUnmounted,
  readonly,
  computed,
  onBeforeMount,
  nextTick,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  ElForm,
  ElFormItem,
  ElCard,
  ElInput,
  ElSelect,
  ElOption,
  ElMessage,
  ElLoading,
} from "element-plus";
import { getToken } from "@/utils/auth";
import { getAirApplyListApi } from "@/api/flightTask/airspaceApply";
import { getFlyapplyDetailApi } from "@/api/flightTask/flyApply";
import {
  editFlyActionApi,
  getFlyActionDetailApi,
} from "@/api/flightTask/flyAction";
import {
  getPersonList,
  getPersonDetail,
  getDeviceListDetail,
} from "@/api/dataManagement/dataUser";
import {
  getInstitutionList,
  getPilotAndDeviceApi,
} from "@/api/dataManagement/institutional";
import { getDeviceList, getDroneDetail } from "@/api/dataManagement/device";
import { getAirspaceType } from "@/api/airSpace/airSpaceSetUp";
import { getAirTypeIds } from "@/api/airSpace/enquiry";
import useFlightTaskStore from "@/store/modules/flightTask";
import dayjs from "dayjs";
import Upload from "@/components/Upload/index";
import { dataFormat } from "@/utils/format";
import { getDicts } from "@/api/system/dict/data";

// 路由
const route = useRoute();
const router = useRouter();
const loading = ref();
// 仓库
const flightTaskStore = useFlightTaskStore();
// 当前激活的步骤
const activeStep = ref(2);
// 打开页面的方式
const openType = ref();
// 个人申请或机构申请
const applyType = ref();
// 放飞申请 ID
const flyApplyId = ref();
const releaseStatus = ref();
const flyActionId = ref();
const defaultTime = new Date(2000, 2, 1, 23, 59, 59);
// 空域类型 ：空域--航线
const airTypeList = [
  {
    value: 0,
    label: "空域",
  },
  {
    value: 1,
    label: "航线",
  },
];
// 航空器类型： 有人--无人
const deviceTypeList = ref([]);
// 飞手列表
const dronePilotList = ref([]);

// 起飞方式: 垂直--倾斜
const flyModeList = [
  {
    value: 0,
    label: "垂直爬升",
  },
  {
    value: 1,
    label: "倾斜爬升",
  },
];
// 飞行模式: 视距内__视距外
const flightModeList = ref([]);
// 操控模式:
const operatorModeList = ref([]);
//  空域性质
const airspaceNatureList = ref([]);
// 保存按钮是否可用
const isDisabled = ref(false);
// 表单是否可编辑
const disabledForm = computed(() => {
  return openType.value === "detail";
});

const taskNameList = computed(() => {
  if (applyType.value === 0) {
    return [
      {
        taskNameId: 7,
        taskName: "个人娱乐",
      },
      {
        taskNameId: 10,
        taskName: "空中拍照",
      },
    ];
  } else {
    return flightTaskStore.taskNameList;
  }
});

// 时间边界
const earliestTime = ref();
const latestTime = ref();

const SpickerOptions = (time) => {
  let stimes = +dayjs(time) + 24 * 3600 * 1000 - 1000;
  let etimes = +dayjs(time);
  let startT = +dayjs(earliestTime.value);
  let endT = +dayjs(latestTime.value);
  return startT > stimes || etimes > endT;
};
const EpickerOptions = (time) => {
  let stimes = +dayjs(time) + 24 * 3600 * 1000 - 1000;
  let etimes = +dayjs(time);
  let startT = +dayjs(earliestTime.value);
  let endT = +dayjs(latestTime.value);
  return startT > stimes || etimes > endT;
};

/**
 * @获取字典数据
 * */
const getselectdata = async () => {
  await getDicts("fly_pattern_type").then((res) => {
    // 飞行模式
    if (res.code === 200) {
      flightModeList.value = res.data;
    }
  });
  await getDicts("operation_pattern_type").then((res) => {
    // 操作模式
    if (res.code === 200) {
      operatorModeList.value = res.data;
    }
  });
  await getDicts("airspace_nature_type").then((res) => {
    // 空域性质
    if (res.code === 200) {
      airspaceNatureList.value = res.data;
    }
  });
  await getDicts("device_type").then((res) => {
    // 设备类型
    if (res.code === 200) {
      deviceTypeList.value = res.data;
    }
  });
};

// ---------------------------------------------- 初始化表单  -----------------------------------------------------

/**
 * @根据空域编号或申请人查询空域申请记录
 * */
const querySearchAsync = async (queryString, cb) => {
  const { rows } = await getAirApplyListApi(
    {},
    {
      airspaceApplyCode: queryString,
      approvalStatus: 1,
    }
  );
  cb(rows);
};

const handleSelect = (item) => {
  // console.log("///////////////////", item);
  applyType.value = item.applyType;
  remoteMethod(item.applyName);
  if (detailForm.value.flightArea > -1) changeAirType();
  detailForm.value = item;
  // detailForm.value.aircraftType = `${item.aircraftType}`;
  detailForm.value.aircraftId = item.aircraftId.split(",");
  detailForm.value.approvalRemark = "";
  earliestTime.value = item.startTime;
  latestTime.value = item.endTime;

  if (item.aircraftType !== "4") {
    // detailForm.value.flightMode = `${item.flightMode}`;
    // detailForm.value.operatorMode = `${item.operatorMode}`;
    // detailForm.value.airspaceNature = `${item.airspaceNature}`;
    detailForm.value.emergencyPlan = item.emergencyPlan;
  }

  if (item.flightArea === 0) {
    areaInfo.flightAddress = item.flightAddress;
    areaInfo.flightRadius = item.flightRadius;
    //不用地址转化直接使用返回的经纬度
    // isSearch.value = true;
    applySpace = drawCircle(
      [item.flightLongitude, item.flightLatitude],
      item.flightRadius,
      "#1791fc",
      "#FF33FF"
    );
    // isRedraw.value = true;
    areaInfo.flightLongitude = item.flightLongitude;
    areaInfo.flightLatitude = item.flightLatitude;
    aMap.add(applySpace);
    aMap.setFitView([applySpace]);

    // if (!disabledForm.value) applySpace.on("click", editAirSpace);

    setTimeout(() => {
      for (let i = 0; i < jinfeiAir.length; i++) {
        judgeOverlap(jinfeiAir[i], applySpace);
        if (isOverlap.value) return;
      }
    }, 1500);
  } else {
    dataToCanvas(item);
  }
};

/**
 * @初始化表单对象
 * */
const initForm = () => {
  return {
    airspaceApplyCode: null,
    airspaceApplyId: null,
    applicant: null,
    applicantId: null,
    flyingHand: null,
    flyingId: null,
    aircraftId: null,
    lowHeight: null,
    topHeight: null,
    startTime: null,
    endTime: null,
    remark: null,
    contacts: null,
    mobile: null,
    // 审批备注
    approvalStatus: 0,
    approvalRemark: null,
  };
};
// 详情表单
let detailForm = ref(initForm());
const detailFormRef = ref();
let submitForm = ref({
  flyTime: null,
  descendTime: null,
  duration: null,
  remark: null,
});
let fileList = ref([]);
let subFileList = ref([]);
// 表单校验规则
const rules = reactive({
  flyTime: [
    { required: true, message: "请选择实际起飞时间", trigger: "change" },
    {
      validator: (rule, value, callback) => {
        let sT = +dayjs(value);
        if (
          submitForm.value.descendTime &&
          +dayjs(submitForm.value.descendTime) < sT
        ) {
          callback("起飞时间不可以晚于降落时间！");
        } else {
          callback();
        }
      },
      trigger: "change",
    },
  ],
  descendTime: [
    { required: true, message: "请选择实际降落时间", trigger: "change" },
    {
      validator: (rule, value, callback) => {
        let eT = +dayjs(value);
        if (submitForm.value.flyTime && +dayjs(submitForm.value.flyTime) > eT) {
          callback("降落时间不可以早于起飞时间！");
        } else {
          callback();
        }
      },
      trigger: "change",
    },
  ],
});

// 实际飞行时间
const duration = computed(() => {
  if (submitForm.value.duration) return submitForm.value.duration;
  if (submitForm.value.flyTime && submitForm.value.descendTime) {
    let duration =
      +dayjs(submitForm.value.descendTime) - +dayjs(submitForm.value.flyTime);
    return (duration / 60000).toFixed(0);
  } else {
    return null;
  }
});

/**
 * @文件上传成功回调函数
 */
const uploadSuccess = (data) => {
  subFileList.value.push(data);
};

const deleteFile = (index) => {
  fileList.value.splice(index, 1);
};

/**
 * @提交表单
 * */
const submit = async (formEl) => {
  if (!formEl) return;
  isDisabled.value = true;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let flyAction = {
        ...submitForm.value,
        duration: duration.value,
        flyActionId: flyActionId.value,
        flyTime: dataFormat(submitForm.value.flyTime, "YYYY-MM-DD HH:mm"),
        descendTime: dataFormat(
          submitForm.value.descendTime,
          "YYYY-MM-DD HH:mm"
        ),
      };
      const res = await editFlyActionApi({
        flyAction,
        lowairServiceFiles: subFileList.value,
      });
      if (res.code === 200) {
        isDisabled.value = false;
        ElMessage.success(res.msg);
        router.push({
          path: "/airTask/flight-execution",
        });
      } else {
        isDisabled.value = false;
        ElMessage.error(res.msg);
      }
    } else {
      isDisabled.value = false;
      console.log("error submit!", fields);
    }
  });
};

/**
 * @取消提交
 * */
function cancelSub() {
  detailForm = reactive(initForm());
  router.push({
    path: "/airTask/flight-execution",
  });
}

// ---------------------------------------------- 搜索机构、飞手、航空器  -----------------------------------------------------

// 申请人ID
const applicantId = ref();
// 机构申请--飞手
const pilot = ref([]);
// 航空器列表
const aircraftList = ref([]);
const selectaircraftList = ref([]);
let timerId = null;
/**
 * @根据名称查询申请人或机构ID
 * */
const remoteMethod = async (userName) => {
  if (!userName) return;
  if (timerId) {
    clearTimeout(timerId);
  }
  timerId = setTimeout(async () => {
    if (applyType.value === 0) {
      const { rows } = await getPersonList({}, { userName });
      applicantId.value = rows[0].userId;
    } else {
      const { rows } = await getInstitutionList(
        {},
        { institutionName: userName }
      );
      applicantId.value = rows[0].institutionId;
    }
    timerId = null;
  }, 300);
};

/**
 * @根据持有人查询飞行器列表数据
 * */
const getAircaftList = async (personId) => {
  const { rows } = await getDeviceListDetail({}, personId);
  aircraftList.value = rows;
  if (detailForm.value.aircraftType)
    selectaircraftList.value = aircraftList.value.filter((item) => {
      return item.deviceTypeId == detailForm.value.aircraftType;
    });
  console.log("selectaircraftList.value", selectaircraftList.value);
};

/**
 * @获取机构下飞手与航空器信息
 * */
const getPilotAndDevice = async (id) => {
  const { data } = await getPilotAndDeviceApi(id);
  aircraftList.value = data.deviceList;
  dronePilotList.value = data.personList;
  if (detailForm.value.aircraftType)
    selectaircraftList.value = aircraftList.value.filter((item) => {
      return item.deviceTypeId == detailForm.value.aircraftType;
    });
  jointFirmPolit(detailForm.value.flyingHand, detailForm.value.flyingId);
};

/**
 * @机构申请飞手信息处理
 * */
function jointFirmPolit(flyHands, flyIds) {
  let hands = flyHands.split(",");
  let ids = flyIds.split(",");
  let pilots = [];
  hands.forEach((item, index) => {
    const [ownerName, phone] = item.split(" ");
    pilots.push(`${ownerName}+${ids[index]}+${phone}`);
  });
  pilot.value = pilots;
  console.log("pilot.value", pilot.value);
}

/**
 * @监听申请人ID获取下属飞手与航空器
 * */
watch(applicantId, (newV, oldV) => {
  if (applyType.value === 0) {
    getAircaftList(applicantId.value);
  }
  if (applyType.value === 1) {
    getPilotAndDevice(applicantId.value);
  }
});

// /**
//  * @机构申请飞手信息处理
//  * */
// watch(pilot, (newV, oldV) => {
//   // const [flyingHand, flyingId] = newV.split("+");
//   // detailForm.value.flyingHand = flyingHand;
//   // if (flyingId) detailForm.value.flyingId = flyingId;
//   if (applyType.value === 1) {
//     let flyHands = [];
//     let flyIds = [];
//     newV.forEach((item) => {
//       const [ownerName, flyingId, phone] = item.split("+");
//       flyHands.push(`${ownerName} ${phone}`);
//       flyIds.push(flyingId);
//     });
//     detailForm.value.flyingHand = flyHands.join(",");
//     detailForm.value.flyingId = flyIds.join(",");
//   }
// });

// ---------------------------------------------- 图层控制  -----------------------------------------------------
const layerVisible = ref(false);
const airspaceList = ref([]);
const checkAll = ref(false);
const checkedCount = ref("");
const checkedCities = ref([]);
const isIndeterminate = ref(true);
const airList = ref([]);
let satellite = ref("");
let grid = ref("");
let spaceList = [];
let jinfeiTypeId = ref([]);
/**
 * @显示图层控件
 * */
const airspaceControl = () => {
  layerVisible.value = !layerVisible.value;
};

/**
 * @全部空域点击
 * */
function handleCheckAllChange(val) {
  console.log(val);
  checkedCities.value = val
    ? airspaceList.value.map((item) => item.airTypeId)
    : [];
  isIndeterminate.value = false;
  if (val) {
    getAirspaceTypeList();
  } else {
    aMap.remove(spaceList);
    spaceList = [];
  }
}

/**
 * @显示完整空域名
 * */
function checkMouse(val, index) {
  document.getElementById("ckeckName" + index).title = val;
}

/**
 * @单个空域点击
 * */
function handleCheckedCitiesChange(value) {
  aMap.remove(spaceList);
  spaceList = [];
  getAirAirspace(value);
  checkedCount.value = value.length;
  checkAll.value = checkedCount.value === airspaceList.value.length;
  isIndeterminate.value =
    checkedCount.value > 0 && checkedCount.value < airspaceList.value.length;
}

// 构造官方卫星、路网图层
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer = new AMap.TileLayer.RoadNet();
/**
 * @切换卫星地图
 * */
const swicthSatellite = (val) => {
  if (val) {
    aMap.add(satelliteLayer);
  } else {
    aMap.remove(satelliteLayer);
  }
};
/**
 * @切换路网地图
 * */
const handleGrid = (val) => {
  if (val) {
    aMap.add(roadNetLayer);
  } else {
    aMap.remove(roadNetLayer);
  }
};

/**
 * @获取区域列表信息
 * */
function getAirspaceTypeList(isFirst = false) {
  getAirspaceType().then((response) => {
    if (response.code === 200) {
      airspaceList.value = response.data;
      if (isFirst) {
        airspaceList.value.forEach((item) => {
          if (item.controlStatus === 1) {
            jinfeiTypeId.value.push(item.airTypeId);
            checkedCities.value.push(item.airTypeId);
          }
        });
      } else {
        checkedCities.value = airspaceList.value.map((item) => item.airTypeId);
        checkAll.value = true;
      }
      checkedCount.value = airspaceList.value.length;
      getAirAirspace(checkedCities.value, isFirst);
    }
  });
}

/**
 * @请求空域信息
 * */
function getAirAirspace(val, isFirst) {
  val.map((item1) => {
    getAirTypeIds(item1).then((response) => {
      if (response.code === 200) {
        airList.value = response.data;
        if (airList.value.length > 0) {
          airList.value.map((item) => {
            if (item.circle == 1) {
              // 圆形
              var circle = drawCircle(
                item.pointLocation.split(","),
                item.radius,
                item.fullColor,
                item.lineColor
              );
              spaceList.push(circle);
              if (isFirst && jinfeiTypeId.value.includes(item.airTypeId))
                jinfeiAir.push(circle);
              aMap.add(circle);
            } else {
              // 多边形
              var polygon = polygonDraw(item);
              spaceList.push(polygon);
              if (isFirst && jinfeiTypeId.value.includes(item.airTypeId))
                jinfeiAir.push(polygon);
            }
          });
        }
      }
    });
  });
}

/**
 * @绘制多边形
 * */
function polygonDraw(val) {
  var mouseTool = new AMap.Polygon({
    path: eval("[" + val.pointLocation + "]"),
    strokeColor: val.lineColor,
    strokeWeight: 6,
    strokeOpacity: 1,
    fillOpacity: 0.4,
    fillColor: val.fullColor,
    strokeStyle: "solid",
    bubble: true,
  });
  aMap.add([mouseTool]);
  return mouseTool;
}

// ---------------------------------------------- 初始化地图  -----------------------------------------------------
let aMap = null;
let jinfeiAir = [];
let isOverlap = ref(!!detailForm.value.focus);
const initMap = () => {
  aMap = new AMap.Map("airspaceMap", {
    viewMode: "3D",
    zoom: 12,
    center: [120.209947, 30.245853],
    mapStyle: "amap://styles/fresh",
  });
};

/**
 * @地图绘制圆形
 * @center 中心点坐标，数组
 * @radius  圆形半径
 * @fillColor 圆形填充颜色
 * @strokeColor 圆形边界颜色
 * */
const drawCircle = (center, radius, fillColor, strokeColor) => {
  var circle = new AMap.Circle({
    center,
    radius,
    strokeColor,
    strokeOpacity: 1,
    strokeWeight: 2,
    fillOpacity: 0.4,
    strokeStyle: "solid",
    fillColor,
    zIndex: 50,
  });
  return circle;
};

/**
 * @地图绘制折线
 * @path 折线点坐标数组
 * @strokeColor 折线颜色
 * @type 折线类型 ： solid,dashed
 * */
const drawLine = (path, strokeColor = "#3366ff", type = "solid") => {
  let polyline = new AMap.Polyline({
    path,
    strokeColor,
    strokeOpacity: 1,
    strokeWeight: 3,
    strokeStyle: type,
    zIndex: 50,
  });
  return polyline;
};

/**
 * @地图绘制marker点
 * @content 航点信息
 * @callback 航点点击回调事件
 * */
const drawMarker = (content, callback = null) => {
  let marker = new AMap.Marker({
    position: [content.lng, content.lat],
    icon: content.icon,
    offset: new AMap.Pixel(-16, -32),
  });
  marker.content = content;
  marker.on("click", callback);
  marker.on("mouseout", function () {
    aMap.clearInfoWindow();
  });
  return marker;
};

/**
 * @判断两个空域是否相交重叠
 * @circle1 第一个空域
 * @circle2 第二个空域
 * */
const judgeOverlap = (circle1, circle2) => {
  var circle1_path = circle1.getPath();
  var circle2_path = circle2.getPath();
  var doesRingRingIntersect =
    AMap.GeometryUtil.doesRingRingIntersect(circle1_path, circle2_path) ||
    AMap.GeometryUtil.isRingInRing(circle2_path, circle1_path) ||
    AMap.GeometryUtil.isRingInRing(circle1_path, circle2_path);
  isOverlap.value = doesRingRingIntersect;
};

/**
 * @设置高德地图地理编码城市为杭州
 * */
let geocoder = new AMap.Geocoder({
  city: "330100", //城市设为杭州，默认：“全国”
});
// ---------------------------------------------- 绘制空域  -----------------------------------------------------
// 空域信息集合
let areaInfo = reactive({
  flightAddress: "",
  flightRadius: null,
  flightLongitude: null,
  flightLatitude: null,
});
// 申请的空域
let applySpace = null;

/**
 * @绘制申请空域
 * */
function createApplySpace() {
  geocoder.getLocation(areaInfo.flightAddress, function (status, result) {
    if (status === "complete" && result.geocodes.length) {
      let lnglat = result.geocodes[0].location;
      applySpace = drawCircle(
        [lnglat.lng, lnglat.lat],
        areaInfo.flightRadius,
        "#1791fc",
        "#FF33FF"
      );
      areaInfo.flightLongitude = lnglat.lng;
      areaInfo.flightLatitude = lnglat.lat;
      aMap.add(applySpace);
      aMap.setFitView([...spaceList, applySpace]);
      for (let i = 0; i < jinfeiAir.length; i++) {
        // if (isOverlap.value) return;
        judgeOverlap(jinfeiAir[i], applySpace);
        if (isOverlap.value) return;
      }
    } else {
      log.error("根据地址查询位置失败");
    }
  });
}

/**
 * @切换飞行区域类型 清空之前填写的数据防止提交后产生数据干扰
 * */
const changeAirType = (e) => {
  // 清除空域信息
  if (applySpace) aMap.remove(applySpace);

  if (pointList.length > 0) {
    // 清除航线信息
    pointList = [];
    lineList = [];
    airlineInfo = reactive(resetAirLineInfo());
    aMap.remove([...markerList, standbyPolyline, polyline, standbyMarker]);
    markerList = [];
    polyline = null;
    standbyPolyline = null;
    standbyMarker = null;
  }
  aMap.setFitView(jinfeiAir);
};

// ---------------------------------------------- 绘制航线  -----------------------------------------------------
// 是否编辑航线
const isEdit = ref(false);
// 是否选择备降点
const isStandbyPoint = ref(false);
// 当前绘制的航点信息集合
const pointInfo = reactive({
  lng: null,
  lat: null,
  height: 0,
  icon: "",
});
// 当前编辑航点的索引
const activeIndex = ref();
// 航点信息数组，数组元素为对象形式：[经度,纬度,高度]
let pointList = [];
// 存储绘制航线的经纬度的二维数组
let lineList = [];
// 保存所有航点的 marker 数组
let markerList = [];
// 备降点 marker
let standbyMarker = null;
// 航线
let polyline = null;
// 备降航线
let standbyPolyline = null;

// 航点图标
const iconS = "/img/startpoint.png";
const iconP = "/img/pathpoint.png";
const iconE = "/img/endpoint.png";
const iconB = "/img/standbypoint.png";

// 提交的航线信息集合emergencyPlan
let airlineInfo = reactive(resetAirLineInfo());
/**
 * @重置航线信息
 * */
function resetAirLineInfo() {
  return {
    flyMode: null,
    flyHeight: null,
    airlinePoints: null,
    // 起飞点：
    takeOffPointAddress: "",
    // 降落点：
    landingPointAddress: "",
    // 备降点：
    alternateLandingPointAddress: "",
  };
}

/**
 * @点击航点 ： 点击航点，获取航点信息，弹出编辑框编辑航点
 * */
function clickMarker(event) {
  isEdit.value = true;
  const { lng, lat, height } = event.target.content;
  activeIndex.value = pointList.findIndex(
    (item) => item[0] === lng && item[1] === lat
  );
  // 判断编辑的是航线点还是备降点
  if (
    airlineInfo.alternateLandingPointLongitude === lng &&
    airlineInfo.alternateLandingPointLatitude === lat
  ) {
    isStandbyPoint.value = true;
  }
  let icon =
    activeIndex.value === 0
      ? iconS
      : activeIndex.value === pointList.length - 1
      ? iconE
      : iconP;
  pointInfo.lng = lng;
  pointInfo.lat = lat;
  pointInfo.height = height;
  pointInfo.icon = icon;
  var str = [];
  str.push("<p style='margin:5px 0;'>经度：" + lng + "</p>");
  str.push("<p style='margin:5px 0;'>纬度：" + lat + "</p>");
  str.push("<p style='margin:5px 0;'>高度：" + height + "(米)</p>");
  // 设置信息弹窗内容
  let infoWindow = new AMap.InfoWindow({
    content:
      '<div class="info" style="color: #2B333F;background:white;padding: 5px 10px;width:150px;border-radius:10px;font-size:14px" >' +
      str.join("") +
      '</div><div class="sharp"></div>',
    isCustom: true,
    offset: new AMap.Pixel(0, -17),
    closeWhenClickMap: true, //鼠标点到地图其他位置就关闭信息窗体
  });
  //这个mark.lnglat就是传入的MapsEvent的发生事件光标所在的位置
  infoWindow.open(aMap, event.lnglat, 200);
}

/**
 * @根据申请详情绘制航线
 * */
function dataToCanvas(data) {
  let arr = data.airlinePoints.split(",");
  pointList = arr.map((item) => {
    return item.split("@");
  });
  pointList.forEach((item, index) => {
    let icon =
      index === 0 ? iconS : index === pointList.length - 1 ? iconE : iconP;
    let marker = drawMarker(
      { lng: item[0], lat: item[1], height: item[2], icon },
      clickMarker
    );
    markerList.push(marker);
  });
  lineList = arr.map((item) => item.split("@").splice(0, 2));
  polyline = drawLine(lineList);
  if (data.alternateLandingPointLongitude) {
    let lng = data.alternateLandingPointLongitude;
    let lat = data.alternateLandingPointLatitude;
    let standbyList = [lineList[lineList.length - 2], [lng, lat]];
    standbyPolyline = drawLine(standbyList, "#3366ff", "dashed");
    standbyMarker = drawMarker(
      {
        lng,
        lat,
        height: 0,
        icon: iconB,
      },
      clickMarker
    );
    aMap.add([standbyPolyline, standbyMarker]);
  }
  aMap.add(markerList);
  aMap.add(polyline);
  airlineInfo = reactive(data);
}

// ----------------------------------------------  查看飞手、飞行器详情  -----------------------------------------------------
const dronePilotVisible = ref(false);
const droneVisible = ref(false);

const pilotDetList = ref([]);
const deviceDetList = ref([]);

/**
 * @获取飞手信息
 * */
const showDronePilotDetail = (id) => {
  pilotDetList.value = [];
  const ids = id.split(",");
  ids.forEach(async (item) => {
    const { data } = await getPersonDetail(item);
    pilotDetList.value.push(data);
  });
  dronePilotVisible.value = true;
};

/**
 * @获取航空器信息
 * */
const showDroneDetail = async (deviceType, institutionId, deviceIds) => {
  deviceDetList.value = [];
  deviceIds.forEach(async (deviceSn) => {
    const { data } = await getDroneDetail({
      deviceSn,
      institutionId,
      deviceType,
    });
    deviceDetList.value.push(data);
  });
  droneVisible.value = true;
};

// ----------------------------------------------  生命周期事件  -----------------------------------------------------
/**
 * @挂载生命周期
 * */
onBeforeMount(async () => {
  loading.value = ElLoading.service({
    lock: true,
  });
  flyApplyId.value = route.query.flyApplyId;
  flyActionId.value = route.query.flyActionId;
  releaseStatus.value = route.query.releaseStatus * 1;
  activeStep.value =
    releaseStatus.value === 0 ? 1 : releaseStatus.value === 1 ? 2 : 3;
  getselectdata();
});
/**
 * @挂载生命周期
 * */
onMounted(async () => {
  initMap();
  getAirspaceTypeList(true);
  if (flyApplyId.value) {
    const { data } = await getFlyapplyDetailApi(flyApplyId.value);
    handleSelect({ ...data.airspaceApply, ...data.flyApply });
    fileList.value = data.tlowairServiceFiles || [];
  }
  if (flyActionId.value) {
    const { data } = await getFlyActionDetailApi(flyActionId.value);
    console.log(data);
    submitForm.value = data.flyAction;
    subFileList.value = data.tlowairServiceFiles;
  }
  openType.value = route.query.openType;
  loading.value.close();
});
/**
 * @组件销毁时销毁地图
 * */
onUnmounted(() => {
  aMap.destroy();
});
</script>

<style lang="scss">
#flightExecution {
  .el-step__icon.is-icon {
    top: -14px;
    width: 49px;
    height: 49px;
  }
  .detail-dialog2 {
    top: 0;
  }

  .detail-dialog .el-dialog__header {
    color: rgba(32, 39, 65, 1) !important;
    background-color: #f5f7f7;
    border-radius: 10px 10px 0 0;
    .el-dialog__title {
      color: rgba(32, 39, 65, 1) !important;
    }
  }

  .detail-dialog .el-dialog__body {
    background-color: #f5f7f7;
  }

  .showMore {
    position: relative;

    .el-input .el-input__suffix {
      display: none !important;
    }

    .show {
      position: absolute;
      left: 73%;
      width: 14px;
      height: 14px;
      background: url("@/assets/images/showmore.png");
      cursor: pointer;
    }
  }

  .el-autocomplete {
    width: 80%;
  }

  .allcrad {
    overflow-y: auto; /* 设置容器为垂直滚动 */
    height: 550px;
    .crad-item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      border-radius: 10px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 4px 4px rgba(43, 193, 123, 0.2);
      width: 100%;
      margin-bottom: 20px;
      .item {
        display: flex;
        margin: 15px 0;
        .item-child {
          display: flex;
          flex: 1;
          .child-title {
            padding-left: 10px;
            text-align: right;
            width: 90px;
            font-size: 14px;
            color: rgba(102, 102, 102, 1);
          }
          .child-text {
            width: 180px;
            padding-left: 20px;
            line-height: 22px;
          }
        }
      }
    }
  }
  .allcrad::-webkit-scrollbar {
    display: none;
  }

  .dialogFoot {
    height: 10px !important;
  }
}
</style>

<style scoped lang="scss">
#flightExecution {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // overflow-y: scroll; /* 显示垂直滚动条 */
  // scrollbar-width: none; /* Firefox */
  // -ms-overflow-style: none; /* Internet Explorer and Edge */

  .applicationForm {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    width: calc(100% - 40px);
    height: 100%;
    margin: 0 20px 20px;
    border-radius: 10px;

    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 92%;
      box-sizing: border-box;

      .leftCard {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 26%;
        height: 100%;
        box-sizing: border-box;
        overflow-y: scroll;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer and Edge */

        .filling {
          width: 100%;
          background-color: #fff;
          margin-bottom: 10px;
        }
        .basicInfo {
          width: 100%;
          background-color: #fff;
        }
        .el-form-item__label {
          font-size: 14px;
          margin-right: 20px;
        }

        .el-input,
        .el-select,
        .el-textarea {
          width: 80%;
        }
      }

      .rightCard {
        width: 73%;
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;

        .el-input,
        .el-select {
          width: 256px;
        }

        .map-argument {
          width: 100%;
          height: 119px;

          .drowAddress {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .item {
              display: flex;
              justify-content: center;
              align-items: center;

              .text {
                display: inline-block;
                text-align: right;
                width: 122px;
                margin: 0 14px;
                font-size: 14px;
              }

              .text.last {
                text-align: left;
                width: 50px;
              }
            }

            img {
              width: 14px;
              height: 14px;
            }
          }

          .airLine {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            padding: 10px;
            gap: 10px;
            margin-left: 5%;
            width: 90%;
            height: 98px;
            box-sizing: border-box;
            border-radius: 6px;
            background: rgba(51, 151, 255, 0.03);

            .args {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              margin: 0;
              width: 32%;

              .item {
                display: inline-block;
                text-align: right;
                width: 110px;
                font-size: 14px;
                font-weight: 400;
              }
            }
          }

          .warning {
            margin-left: 150px;
            font-size: 12px;
            color: rgba(212, 48, 48, 1);
          }
        }

        .map-argument.drowAirLine {
          height: 220px;
        }

        .map-argument.drowAirspace {
          height: 180px;
        }

        #airspaceMap {
          width: 100%;
          height: calc(100% - 119px);
        }

        .tips {
          position: absolute;
          bottom: 0;
          right: 0;
          padding: 10px;
          width: 274px;
          height: 172px;
          font-size: 12px;
          font-weight: 400;
          border-radius: 10px 0px, 0px, 0px;
          background: rgba(255, 255, 255, 1);
          p {
            margin: 0;
          }
        }
        .drawBtn {
          position: absolute;
          bottom: 26px;
          right: 290px;
          width: 106px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 12px;
          font-weight: 400;
          color: #fff;
          border-radius: 4px;
          background: rgba(43, 193, 123, 1);
          border: 1px solid rgba(43, 193, 123, 1);
          cursor: pointer;
          &:hover {
            background: rgba(43, 193, 123, 0.85);
          }
        }

        .editPoint {
          display: flex;
          justify-content: space-around;
          align-items: center;
          position: absolute;
          bottom: 70px;
          left: 20px;
          padding: 10px;
          width: 800px;
          height: 60px;
          border-radius: 4px;
          background-color: #fff;

          img {
            width: 32px;
            height: 39px;
          }

          .pointItem {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 180px;
            height: 39px;

            .title {
              display: inline-block;
              text-align: right;
              margin: 0;
              width: 55px;
              font-size: 14px;
              font-weight: 400;
            }

            .el-input {
              width: 108px;
            }
          }
        }

        .airspaceLayer {
          position: absolute;
          width: 30px;
          height: 30px;
          background: url("@/assets/images/airspacePop.png");
          background-size: 100% 100%;
          right: 20px;
          bottom: 16px;
        }

        .layerControl {
          width: 210px;
          height: auto;
          position: absolute;
          z-index: 1000;
          bottom: 56px;
          right: 20px;
          background-color: #ffffff;
          border-radius: 6px;
          box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
          padding: 18px 21px 15px;

          .el-checkbox-group {
            max-height: 310px;
            margin-left: 20px;
            overflow: hidden;
            overflow-y: scroll; /* 显示垂直滚动条 */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* Internet Explorer and Edge */
            .checkTitleClass {
              width: 150px;
              white-space: nowrap; /* 防止文本换行 */
              overflow: hidden; /* 超出部分隐藏 */
              text-overflow: ellipsis; /* 使用省略号隐藏 */
            }
          }
          .el-checkbox-group::-webkit-scrollbar {
            display: none; /* Safari and Chrome */
          }
          .el-checkbox {
            height: 24px;
          }
        }
      }

      .createBtn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 26px;
        width: 98px;
        height: 36px;
        font-size: 12px;
        box-sizing: border-box;
        border-radius: 4px;
        color: rgba(43, 193, 123, 1);
        background: rgba(51, 151, 255, 0.03);
        border: 1px solid rgba(43, 193, 123, 1);
        cursor: pointer;
        &:hover {
          background: rgba(51, 151, 255, 0.1);
        }
      }
      .createBtn.args {
        width: auto;
        margin-left: 10px;
      }
    }

    .title {
      display: flex;
      align-items: center;
      margin: 30px;
      font-size: 16px;
      font-weight: 600;

      .icon {
        margin-right: 12px;
        width: 16px;
        height: 16px;
        background: url("@/assets/images/titleIcon.png");
      }
    }

    .footBtn {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 0;
      top: -45px;
      height: 40px;
    }

    .btn {
      width: 81px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 4px;
      color: #fff;
      background: rgba(43, 193, 123, 1);
      cursor: pointer;
      &:hover {
        background: rgba(43, 193, 123, 0.85);
      }
    }

    .btn.delete {
      color: rgba(102, 102, 102, 1);
      background: #fff;
      border: 1px solid rgba(220, 223, 230, 1);
      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
    .btn.save {
      margin-left: 20px;
    }
  }
}
</style>
